<template>
  <div>
    <div class="title"><image src="/static/back.svg" class="back" mode="widthFix" /></div>

    <div class="item_top">


      <video id="myVideo" class="topimg"  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu danmu-btn controls >
      
       <cover-view :class="{hide: isActive}">      
        <cover-image mode="widthFix" src='/static/timg.jpg'></cover-image>
      </cover-view> 

      </video>
      <image src="/static/playh.svg" class="playh" mode="widthFix" @click="tap_ch" :class="{hide: isActive}"/></div>
    
    <div class="box_top">文 | 魏紫钰<span>09 otc.2018</span><p>李兰迪: 演员未满 </p></div>
    <div class="box_tx">
      <image src="/static/Rectangle 7.jpg" class="box_tximg" mode="widthFix" /><span>魏紫钰</span><i></i><span>文</span>
    </div>

    <div class="box_text">穿着深蓝色制服上衣与红色格子裙，北京师大附中 2018 届高三的学生李兰迪毕业了。很快，这场毕业典礼登上微博热门话题榜。典礼上，校长亲自为李兰迪颁发了北京师大附中「艺术之星」荣誉奖牌，肯定了李兰迪在演艺道路上的探索。</div>

    <div class="box_title">成长</div>
    <div class="box_main">2017 年 9 月 2 日，这一天，演员李兰迪的工作包括：一场校园见面会、一次视频采访及两场直播活动。直到晚上十点多，当日所有工作结束后，李兰迪和经纪公司的几位工作人员一起去吃了火锅，才算是真正庆祝了自己的 18 岁生日。除此之外，没有专门的大型生日会，没有夸张的公交站牌广告。粉丝们在微博上默默送上了生日祝福视频，回顾了她自出道以来饰演过的所有角色。<br/>
  此前一天，北京师大附中召开新学年开学典礼。这是李兰迪在这座校园中生活的第六年，也是最后一年。虽然因工作原因未能到校参加典礼，但毫无疑问，这一天意味着学生李兰迪正式步入高三年级，成为高考千军万马中的一员。<br/>
  再前一天，由李兰迪主演的青春校园题材网剧《你好，旧时光》杀青。她在剧中出演女主角余周周，一个少年丧母但性格乐观坚强的女孩。该剧五月开机，已经拍摄了超过三个月，终于落幕。<br/>
  似乎有某种命中注定的安排，杀青、高三与 18 岁纷至沓来。它们分别对应李兰迪身上的三重身份：演员、学生与真实的自己，不约而同地，在连续三天内悄然完成了各自蜕变。
  <image src="/static/timg.jpg" mode="widthFix" />
  <span>《中国式关系》剧照</span>
    </div>

    <div class="box_title">路口</div>
    <div class="box_main">
      让李兰迪没想到的是，有一天她会站在师大附中对面，心里想着如何把它打败。<br/>
那是《你好，旧时光》的拍摄现场，一场学科知识竞赛正在进行。对战双方是「振华中学」与「师大附中」。比赛接近尾声，附中占据上风。现在，李兰迪是「振华中学」最后的王牌，她必须在此刻力挽狂澜，击退附中，为「振华中学」争得荣誉。<br/>
为了这场戏，李兰迪要大致记下一连串自己从没学过的微积分解题步骤，拍摄时默写在黑板上。在剧中，她是不会为学习发愁的学霸，可以轻描淡写化解「师大附中」的挑战。可对现实生活中真正的师大附中学生李兰迪而言，学习是件没那么容易搞定的事。「工作压力我觉得可能也就.....还好吧。我觉得（真正的）压力就是，怎么跟学习相互兼顾。」<br/>
她要面对的压力，不是在学习之余如何演戏，而是在演戏之余如何学习——演戏毕竟是「课外活动」，可有可无，但学业总是放不下的。母亲很清楚这点，「（演戏）有好的就接，没有好的我们就学习」。每当李兰迪因拍戏需要向学校请假时，老师们的一致要求也是：不能影响学习。
  <image src="/static/index_top.jpg" mode="widthFix" />
  中央戏剧学院复试现场。此消息被媒体披露，当日便登上微博热搜榜。有媒体拍下照片，她扎着丸子头，素颜，面带笑容。这是中戏艺考录取前的最后一次考试，当天晚上，她在微信朋友圈发出一张手机截图。那是一个可以计算日期倒计时的软件，页面中只有两行内容。第一行是艺考倒计时，第二行是高考倒计时。这天，第一行的数字是 0，第二行数字是 100。一边是演员，一边是学生，绵延并行的道路在这里汇合。她写道：有些路你不走下去，就不知道它有多美。<image src="/static/fu.svg" class="box_fu" mode="widthFix" />
    </div>


      <image src="/static/Ellipse.jpg" class="author_topimg" mode="widthFix" />
      <div class="author_topname2">魏紫钰</div>
      <div class="author_topf "><image src="/static/likeh.svg" mode="widthFix" />喜欢作者</div>

    <div class="author_top">
      <div class="author_topname"><span>报道</span><i></i><p>人物志</p></div>
      <div class="author_topmain">这里是作者简介这里，是作者简介这里是作者简介这里是作者简介这里是作者简介</div>
    </div>


    <div class="post">
      <div class="post_box">
        <image src="/static/Rectangle.jpg" class="postimg" mode="widthFix" />
        <div class="postr">
          <span>02 otc.2018  ·  媒体报道</span>
          <em>他们办了一本最酷的中学生杂志</em>
          <i></i>
          <p>这本杂志所展现的世界是如此的熟悉又陌生：这是一所高中里正在上演的中学生的日常生活，但视野与视角又不囿于校园围墙内。“不像是一本中学生杂志！”或许正是这种意外，吸引墙外的人来探究中学教育的可能性。</p>
        </div>
      </div>
      <div class="post_box">
        <image src="/static/Rectangle.jpg" class="postimg" mode="widthFix" />
        <div class="postr">
          <span>02 otc.2018  ·  媒体报道</span>
          <em>他们办了一本最酷的中学生杂志</em>
          <i></i>
          <p>这本杂志所展现的世界是如此的熟悉又陌生：这是一所高中里正在上演的中学生的日常生活，但视野与视角又不囿于校园围墙内。“不像是一本中学生杂志！”或许正是这种意外，吸引墙外的人来探究中学教育的可能性。</p>
        </div>
      </div>
      <div class="post_box">
        <image src="/static/Rectangle.jpg" class="postimg" mode="widthFix" />
        <div class="postr">
          <span>02 otc.2018  ·  媒体报道</span>
          <em>他们办了一本最酷的中学生杂志</em>
          <i></i>
          <p>这本杂志所展现的世界是如此的熟悉又陌生：这是一所高中里正在上演的中学生的日常生活，但视野与视角又不囿于校园围墙内。“不像是一本中学生杂志！”或许正是这种意外，吸引墙外的人来探究中学教育的可能性。</p>
        </div>
      </div>
          <div class="au_topmore">浏览其它栏目<image src="/static/backh.svg" class="back" mode="widthFix" /></div>
    </div>



    <div class="message">
      <div class="message_box">
        <image src="/static/Rectangle 7.jpg" class="message_boximg" mode="widthFix" />
        <div class="message_boxr">
          <p>魏紫钰</p>
          <em>3小时前</em>
          <span>这里是文章评论这里是文章评论这里是文章评论这里是文章评论</span>
        </div>
      </div>

        <div class="message_box">
        <image src="/static/Rectangle 7.jpg" class="message_boximg" mode="widthFix" />
        <div class="message_boxr">
          <p>魏紫钰<i>作者回复</i></p>
          <em>3小时前</em>
          <span>这里是文章评论这里是文章评论这里是文章评论这里是文章评论</span>
        </div>
        <div class="message_boxf">@张紫菜：这里是文章评论这里是文章评论这里是文章评论这里是文章评论</div>
      </div>

      <div class="message_box">
        <image src="/static/Rectangle 7.jpg" class="message_boximg" mode="widthFix" />
        <div class="message_boxr">
          <p>魏紫钰</p>
          <em>3小时前</em>
          <span>这里是文章评论这里是文章评论这里是文章评论这里是文章评论</span>
        </div>
      </div>
    </div>

    <div class="footer">
      <input type="text" placeholder="给作者留言...">
      <div class="fr"><image src="/static/ic_comment.svg" mode="widthFix" /><image src="/static/ic_star.svg" mode="widthFix" /><image src="/static/ic_share.svg" mode="widthFix" /></div>
    </div>


    <div class="share">
      <div class="share_bj"></div>
      <div class="share_box">
          <div class="author_title">
            <span>分享</span>
            <i></i>
          </div>
          <div class="share_main">
            <p><image src="/static/down.svg" mode="widthFix" /><span>保存分享海报</span></p>
            <p><image src="/static/wechat.svg" mode="widthFix" /><span>转发给好友</span></p>
          </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
      return {
                isActive: false
            }
  },



 onReady() {
    this.videoContext = wx.createVideoContext('myVideo')
  },

  methods: {
      tap_ch: function(e){
    
    if(this.isActive){
      
          this.isActive = false;
           console.log(this.open);
             var videoContext = wx.createVideoContext("myVideo");

        videoContext.play();
        }else{
          this.isActive = true;

            var videoContext = wx.createVideoContext("myVideo");

        videoContext.play();
       
        }
      }
  }
}
</script>

<style>
.title{ width: 100%;height: 44px;position:fixed;top:0px;left:0;background:#ffffff;z-index: 9;padding:20px 0 0;}
.back{display: block;margin: 10px 0 0 20px;width:24px;height: 24px;float: left;}
.logo{ width: 94px;height:auto; display: block; float:left;margin:10px 95px 0; }

.myVideo{ 
  width:100%;
  height: calc(9 * 750rpx / 16);
  background-color: #fff;
}
.controls{
  position:absolute;
  z-index:1; 
  background-color: #fff;    
   height: calc(9 * 750rpx / 16); 
  margin-top:-430rpx;
}
.play{ 
    position:absolute;
    left:50%;
    margin-top:-300rpx;
    margin-left:-80rpx;    
}
.item_top{width: 100%;height:auto; display: block; float:left;margin:64px 0 0; position: relative; }
.topimg{ width: 100%;height:210px; display: block; float:left;margin:0px 0 0; }
.playh{width: 54px;height:54px; display: block; float:left;top:90px; left:160.5px; position: absolute; z-index: 2; }
.box_top{width: 88%;height:auto; display: block; float:left;margin:24px 6% 10px; font-size: 12px; color: rgba(0,0,0,.6); line-height: 17px;}
.box_top span{width: auto;height:auto; display: block; float:right;}
.box_top p{width: 100%;height:auto; display: block; float:left; font-size: 30px; line-height: 43px; color: #000000; margin: 10px 0 0;Font-Family: Source Han Serif SC}
.box_tx{width: 88%;height:auto; display: block; float:left;margin:0px 6% 16px; font-size: 14px; color: rgba(0,0,0,1); line-height: 20px;}
.box_tx image{width:24px;height:24px; display: block; float:left;margin:-5px 5px 0 0; border-radius: 24px}
.box_tx span{display: block; float:left;margin:0px 5px 0 0;}
.box_tx i{display: block; float:left;margin:9px 5px 0 0;width:24px;height:1px; border-bottom:1px solid #C4C4C4; }
.box_text{width: 287px;height:auto; display: block; float:left;margin:0px 23px 16px; font-size: 14px; color: rgba(0,0,0,1); line-height: 20px; padding: 20px;border:1px solid rgba(0, 0, 0, 0.15); line-height: 25px;margin: 10px 24px;}
.box_title{width: 88%;height:auto; display: block; float:left;margin:20px 6% 7px; font-size: 18px; color: rgba(0,0,0,1); line-height: 32px;}
.box_main{width: 88%;height:auto; display: block; float:left;margin:0px 6% 10px; font-size: 15px; color: rgba(0,0,0,.65); line-height: 28px;}
.box_main image{width: 100%;height:auto; display: block; float:left;  margin: 10px 0 ;}
.box_main span{width: 100%;height:auto; display: block; float:left;  margin: 10px 0 0;font-size: 12px; color: rgba(0,0,0,.4); line-height: 23px;}
.box_main image.box_fu{width: 14px; height: 14px; display:inline-block;float: none;margin: 2px 0 0 2px;}
.author_top{ width: 327px;height:auto; display: block; float:left;margin:0 23px 8px; border:1px solid rgba(0, 0, 0, 0.15); border-top:6px solid #000000; font-size: 12px; }
.author_topimg{ width: 66px; height: 66px; border-radius: 66px; display: block; float:left; margin: 20px 154.5px 5px; }
.author_topname{width: 100%;height:auto; display: block; float:left;margin:15px 0 8px;}
.author_topname span{width: 24px;height:auto; display: block; float:left;margin:10px 0 0 20px; font-size: 12px; line-height: 17px; color: rgba(0,0,0,.4);}
.author_topname i{width: 58px;height:1px; display: block; float:left;margin:20px 0 0 10px;  background: rgba(0,0,0,.1);}
.author_topname p{width: auto;height:auto; display: block; float:left;margin:0 0 0 10px; font-size: 30px; line-height: 43px; color: rgba(0,0,0,1);Font-Family: Source Han Serif}
.author_topmain{width: 291px;height:auto; display: block; float:left;margin:10px 20px 23px; font-size: 14px; line-height: 20px; color: rgba(0,0,0,.4);}
.author_topname2{width: 100%;height:auto; display: block; float:left;margin:15px 0 8px; font-size: 24px; line-height: 34px; color: #000000; text-align: center;}
.author_topf{ width: 96px; height: 32px; line-height: 32px; float: left; border:1px solid #ED474E; margin: 5px 138.5px 48px; font-size: 12px; color: #ED474E; text-align: center;}
.author_topf image{ width: 11px; height: 11px; display:inline-block; margin-right: 2px;}
.author_topf.active{background: #ED474E; color: #ffffff;}
.post_t{width: 88%; height: auto; display: block; float: left;padding:10px 6% 10px; font-size: 14px; line-height: 22px;color:rgba(0,0,0,.4); background: rgba(0,0,0,.03);}
.post{width: 88%; height: auto; display: block; float: left;margin:0 6% 5px;}
.post_box{width: 100%; height: auto; display: block; float: left;margin:25px 0;}
.postimg{width: 80px; height: 80px; display: block; float: left;}
.postr{width: 223px; height: auto; display: block; float: right;}
.postr span{width: 100%; height: auto; display: block; float: left;font-size: 12px; line-height: 20px;color:rgba(0,0,0,.6); font-family:  PingFang SC, Martel;}
.postr em{width: 100%; height: auto; display: block; float: left;margin: 0; font-size: 21px; line-height: 26px;color:rgba(0,0,0,1); font-family: Martel, Source Han Serif SC;}
.postr i{width: 15px; height: 2px; display: block; float: left;margin:5px 0; background: #F62525; margin: 10px 0;}
.postr p{width: 100%; height: auto; display: block; float: left;font-size: 12px; line-height: 17px;color:rgba(0,0,0,.4); font-family: PingFang SC;}
.au_topmore{width: 100%; height: 24px; display: block; float:left; font-size: 14px; line-height: 20px; color:rgba(0,0,0,.4); text-align: right; }
.au_topmore image{width: 24px;height:24px; display: block; float:right; margin: 0 24px 0 5px;}

.message{width: 327px;height:auto; display: block; float:left;margin:10px 23px ;}
.message_box{width: 100%;height:auto; display: block; float:left;margin:10px 0 20px;}
.message_boximg{ width: 42px; height: 42px; display: block; float: left; border-radius: 42px;}
.message_boxr{ width: 271px; height: auto; display: block; float: right;}
.message_boxr p{width: 100%;height:auto; display: block; float:left; font-size: 13px; line-height: 18px; color: rgba(0,0,0,.4);}
.message_boxr p i{width: auto;height:15px; padding: 0 3px; background: #222222; display:inline-block;  font-size: 10px; line-height: 15px; color: #FFFFFF; margin-left: 5px;}
.message_boxr em{width: 100%;height:auto; display: block; float:left; font-size: 10px; line-height: 14px; color: rgba(0,0,0,.4);}
.message_boxr span{width: 100%;height:auto; display: block; float:left; font-size: 15px; line-height: 22px; color: rgba(0,0,0,.65);margin: 5px 0 0;}
.message_boxf{padding: 12px; font-size: 12px; line-height: 18px;color: rgba(0,0,0,.4); border: 1px solid rgba(0,0,0,.1);width: 247px; height: auto;margin: 10px 0 0; display: block;float: right;}
.footer{width: 327px;height:48px; background: #ffffff; display: block; float:left;padding:0 23px; margin: 10px 0 0; position: fixed; left:0; bottom: 0;}
.footer input{width: 180px;height:24px; display: block; float:left; border-bottom: 1px solid #000000; line-height: 24px; margin: 5px 0 0 0; font-size: 12px;}
.fr{width: 125px;height:30px; display: block; float:right;  margin: 5px 0 0 0; position:relative; }
.fr image{width: 24px;height:24px; display: block; float:left;  margin: 5px 25px 0 0; }
.fr image:last-child{margin-right: 0;}

.author_title{width: 327px;height:20px; display: block; float:left;margin:24px 24px 0; position:relative; }
.author_title span{width: auto;height:20px; display: block; float:left;font-size: 12px; line-height: 24px; background: #ffffff; padding: 0 5px 0 0; color: rgba(0,0,0,.4);  position:absolute; z-index: 2; top: 0px;left: 0px}
.author_title i{width: 100%;height:1px; display: block; float:left; border-bottom: 1px solid rgba(0, 0, 0, 0.2); position:absolute;top: 10px;left: 0; z-index: 1;}
.share{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9; display: none;}
.share_bj{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,.3); z-index: 1;}
.share_box{ width: 100%; height:146px; position: fixed; bottom: 0; left: 0; background: #ffffff; z-index: 2;}
.share_main{width: 80%; height: auto; display: block; float:left; margin: 15px 10% 0;}
.share_main p{width: 50%; height: auto; display: block; float:left; text-align: center; font-size: 12px; line-height: 18px; color: #000000;}
.share_main p image{width: 36px; height: 36px; display: table; margin: 0 auto 15px; }
.hide{display: none}
</style>